<template>
  <div class="editorBox">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="myForm.nickName" name="呢称" label="呢称" placeholder="呢称" v-if="$route.params.type === '1'" :rules="[{ required: true, message: '请填写呢称' }]" />
        <van-field v-model="myForm.newPass1" name="新密码" type="password" label="新密码" placeholder="新密码" v-if="$route.params.type === '2'" :rules="[{ required: true, message: '请填写新密码' }]" />
        <van-field v-model="myForm.oldPass" name="旧密码" type="password" label="旧密码" placeholder="旧密码" v-if="$route.params.type === '2'" :rules="[{ required: true, message: '请填写旧密码' }]" />
        <van-field v-model="myForm.newPass2" name="重复新密码" type="password" label="重复新密码" placeholder="重复新密码" v-if="$route.params.type === '2'" :rules="[{ required: true, message: '请填写新密码' }]" />
      </van-cell-group>
      <div style="margin:16px;text-align:center">
        <img style="width:100%;margin-bottom:16px" :src="myForm.src" alt="">
        <myUpload :config="config" ref="myUploader" @fileQueued="fileQueued"  @uploadSuccess="uploadSuccess" />
      </div>
      <div style="margin: 16px;" @click="submitForm('myForm')">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import myUpload from 'src/components/uploader/index.vue';
import { modifyUser, modifyPwd } from 'src/plugins/http/server/sys/user';
import { msgFn } from 'src/utils';
import {
    reactive, computed, ref,toRaw
} from 'vue';
import store from 'src/store';
import { useRoute, useRouter } from 'vue-router';
import { Toast } from 'vant';

export default {
    'components': {
        myUpload
    },
    setup() {
        const userInfo = computed(() => store.state.userInfo);
        const myForm = reactive({
            'nickName': userInfo.value.nickName,
            'src': userInfo.value.src,
            'id': userInfo.value.id
        });
        const myUploader = ref();
        const config = {
            'id': 'uploadAvatar',
            'options': {
                'fileNumLimit': 1,
                'pick': {
                    'id': '#pickerAvatar',
                    'multiple': false
                },
                'accept': [
                    {
                        'title': 'Images',
                        'extensions': 'gif,jpg,jpeg,bmp,png',
                        'mimeTypes': 'image/*'
                    }
                ]
            }

        };
        const pager = reactive({
            'pageNo': 1,
            'pageSize': 10,
            'total': 0
        });
        const articleParams = reactive({
            'name': '',
            'npwd': '',
            'opwd': '',
            'rpwd': ''
        });
        const $route = useRoute();
        const $router = useRouter();

        const tableData = ref([]);

        const delSrc = () => {
            myForm.src = '';
            myUploader.value.reset();
        };
        const fileQueued = () => {
            myUploader.value.uploaderStart();
        };

        const uploadSuccess = (res:any) => {
            myForm.src = res.data[0];
        };
        const submitForm = () => {
            if ($route.params.type === '1') {
                modifyUser({
                    'data': myForm ,
                    'opts':{'isLoading':'1'}
                })
                    .then(() => {
                        store.commit(
                            '_modifyInfo',
                            UtilTools.extend(toRaw(userInfo.value), UtilTools.deepCopy(myForm))
                        );
                        msgFn('修改信息成功', 'success');
                        setTimeout(() => {
                            Toast.clear();$router.go(-1);
                        }, 2001);
                    })
                    .catch(e => {
                        msgFn(e);
                    });
            } else {
                modifyPwd({
                    'data': myForm ,
                    'opts':{'isLoading':'1'}
                })
                    .then(res => {
                        store.commit('_logout', {});
                        msgFn('修改密码成功', 'success');
                        setTimeout(() => {
                            Toast.clear();
                            window.location.href = `${window.location.origin}/#/login`;
                        }, 1000);
                    })
                    .catch(e => {
                        msgFn(e);
                    });
            }

        };
        return {
            config,
            myForm,
            myUploader,
            pager,
            tableData,
            fileQueued,
            delSrc,
            uploadSuccess,
            submitForm,
            articleParams
        };
    }
};
</script>
<style lang='less' scoped>
@import '~@/views/my/editorUser/index.css';
</style>